<script>
import request from "../../../utils/request";
import imageUpload from "../../../components/imageUpload/index";
import { showModal, showToast } from "../../../utils";

export default {
  name: "index",
  components: { imageUpload },
  data() {
    return {
      topicCorrectionType: [],
      inputForm: {
        structureId: "",
				errorCode: "",
				errorNotes: "",
				additionalPicture: "",
      },
    };
  },
  onLoad(query) {
		this.inputForm.structureId = query.structureId;
    //获取反馈类型列表
    request({
      url: "topicCorrection/listCorrectionType",
      errorHandle: true,
      showLoading: true,
    }).then((data) => {
      this.topicCorrectionType = data;
    });
  },
  methods: {
    submit() {
      //表单输入检查
      if (!this.inputForm.errorCode) {
        showToast.default("请选择反馈类型");
        return;
      }
      if (!this.inputForm.errorNotes) {
        showToast.default("请输入反馈内容");
        return;
      }
      request({
        url: "topicCorrection/save",
        data: this.inputForm,
        errorHandle: true,
        showLoading: true,
      }).then((data) => {
        showModal({
          content: "感谢您的反馈，我们会尽快处理",
          showCancel: false,
        }).then(() => {
          uni.navigateBack();
        });
      });
    },
  },
};
</script>

<template>
  <view class="page">
    <view class="block">
      <view class="title">纠错类型</view>
      <view class="feedback-type-list value">
        <view
          class="feedback-type-item"
          v-for="item in topicCorrectionType"
          :key="item.errorCode"
          :class="[inputForm.errorCode === item.errorCode ? 'active' : '']"
          @click="inputForm.errorCode = item.errorCode"
        >
          {{ item.errorName }}
        </view>
      </view>
    </view>
    <view class="block">
      <view class="title">描述</view>
      <view class="value">
        <view class="textarea-container">
          <textarea
            class="textarea"
            placeholder="请详细描述一下您所遇到的问题~"
            v-model="inputForm.errorNotes"
            :maxlength="-1"
            :auto-height="true"
          ></textarea>
        </view>
        <view class="upload-image">
          <imageUpload 
						v-model="inputForm.additionalPicture"
						:upload-params="{
							dir:'topicCorrection'
						}"
					></imageUpload>
        </view>
      </view>
    </view>
    <view class="block">
      <view class="submit-btn" @click="submit">提交</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.page {
  padding: 50rpx 30rpx;

  > .block {
    &:not(:first-child) {
      margin-top: 100rpx;
    }

    > .title {
      font-size: 34rpx;
      font-weight: 500;
      color: #333333;
    }

    > .value {
      margin-top: 36rpx;

      &.feedback-type-list {
        display: flex;
        flex-wrap: wrap;

        .feedback-type-item {
          width: calc((100% - 60rpx) / 4);
          margin-bottom: 20rpx;
          height: 70rpx;
          border: 2rpx solid #999999;
          border-radius: 10rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;

          //排除4的整数倍的元素（最右边的元素）
          &:not(:nth-child(4n)) {
            margin-right: 20rpx;
          }

          &.active {
            background: var(--theme-color);
						color: var(--text-color-white);
          }
        }
      }

      > .textarea-container {
        background: #f2f2f2;
        border-radius: 12rpx;
        padding: 22rpx 32rpx;

        > .textarea {
          width: 100%;
          min-height: 200rpx;
        }
      }

      > .upload-image {
        margin-top: 36rpx;
      }
    }

    > .submit-btn {
      width: 50%;
      margin: 0 auto;
      height: 100rpx;
      background: var(--theme-color);
      border-radius: 50rpx;
      line-height: 100rpx;
      text-align: center;
			color: var(--text-color-white);
    }
  }
}
</style>
